<template>
	<input type="text" v-model="str" class="input"/>
	<button @click="add">添加</button>
	<view v-for="(item,index) in list" :key="item">
		<switch :checked="item.completed" @change="Xg(item)" type="checkbox"/>
	  <view>
	  	{{item.title}}
	  </view>
	  <button @click="Sc(item.id)">删除</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import axios from "axios"
	let list = ref([]);
	let str = ref("")
	axios.get("http://localhost:3000/todos").then((res) =>{
		list.value = res.data
		console.log(res.data);
	});
	function add(){
		axios.post("http://localhost:3000/todos",{
			title:str.value,
			completed:false,
			id:new Date().getTime(),
		}).then((res) =>{
			list.value.push(res.data);
			console.log(res.data);
		    str.value = "";
		});
	}
	function Sc(id){
		axios.delete(`http://localhost:3000/todos/${id}`).then((res) =>{
			list.value = list.value.filter((item) => item.id != id);
			console.log(res.data);
		})
	}
	function Xg(item){
		item.completed = !item.completed
		axios.patch(`http://localhost:3000/todos/${item.id}`,{
			completed: item.completed,
		}).then((res) =>{
			console.log(res.data);
		})
	}
</script>

<style>
.input{
	    border: 1rpx solid black;
	    width: 400rpx;
	}   
</style>
